<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blog</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color:#333;
        }
        .wrap{

            display: flex;
            width: 90vw;
        }
        .card{
            background-size: auto 100%;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 50px;
            color:#fff;
            flex:0.5;
            cursor:pointer;
            height: 80vh;
            position: relative;
            margin: 10px;
            transition: flex 0.7s cubic-bezier(0.05,0.6,0.4,0.9);
        }
        .card h3{
            font-size: 20px;
            position: absolute;
            bottom: 20px;
            left: 20px;
            margin: 0;
            transition: opcity 0s ease-in 0s;
        }
        .card.active{
            /*通过弹性布局方式 改变每个盒子的收缩*/
            flex:5;
        }
        .card.active h3{
            opacity: 1;
            transition: opcity 0.3s ease-in 0.4s;
        }
        @media (max-width:500px){
            .wrap{
                width: 100vw;

            }
            .card:nth-child(4){
                display: none;
            }
            .card:nth-child(5){
                display: none;
            }
        }
                a{text-decoration:none}

a:hover{text-decoration:none}
a:link{color:white;}

a:visited{color:white;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="card active" style = "background-image:url(img/b1.jpg);">
            <h3>pattern</h3>
        </div>
        <div class="card" style = "background-image: url(img/b3.jpg);">
        </div>
        <div class="card" style = "background-image: url(img/b2.jpg);">
            <h3>qishou</h3>
        </div>
        <div class="card" style = "background-image: url(img/tx.jpg);">
            <h3>cat</h3>
        </div>
        <div class="card" style = "background-image: url(img/3.jpg);">
            <a href="contract.html"><h3>others</h3> </a>
        </div>
    </div>
    <script>
       //获取小卡片
       var wrap = document.getElementsByClassName('wrap')[0];
       var cards = wrap.getElementsByClassName('card');
       console.log(wrap);
       console.log(cards);
       
       //遍历节点给cards添加移入事件，并添加active类名即可实现 手风琴收缩效果

       for(var i = 0; i < cards.length; i++){
           cards[i].addEventListener('mouseover',function(){
               //事前先清除下
               removeActive();
               //给当前的添加active类名
               this.className = "card active"
           })
       }

       function removeActive(){
           for(var i =0; i < cards.length; i++){
               cards[i].className = "card";
           }
       }
    </script>
</body>
</html>